<script setup lang="ts">
import uploadFile from '@/components/upload-file/index.vue'
import { onLoad } from '@dcloudio/uni-app'
import { ref, nextTick } from 'vue'
import FilterNavbar from '@/components/FilterNavbar'
import { getDetailApi, renewInsureApi } from '@/api/asset/car-insure'
import { usePageDict, useSysDict } from '@/hooks/useDict'
import useFormFold from '@/hooks/useFormFold'
const sysDict = useSysDict(['insure_business_kind_type'])
const initFold1 = ref(true)
const modelValue = ref(false)
const insureKind = ref(0) //险种 0交强 1商业
const carInfo = ref(null)
const fileTypes = ref(['pdf'])
const apiStatus = ref(false)
import dayjs from 'dayjs'
import { useLoadDataAndHotUpdateNavigateBack } from '@/hooks/useListNavigate'
const form = ref({
  id: '',
  carInsureDetail: []
})
const { foldStatus, foldValidate } = useFormFold([
  {
    key: 'fold1',
    props: ['siteId','insureCompanyStr', 'times'],
  },
])
const rules = ref({
  insureCompanyStr: {
    required: true,
    message: '请选择保险公司',
  },
  siteId: {
    required: true,
    message: '请选择',
  },
  times: {
    type: 'array',
    min: 2,
    required: true,
    message: '请选择有效期',
  },

})
const close = () => {
  modelValue.value = false
}
const getDetails = async (id) => {
  const res = await getDetailApi({id: id})
  console.log(res.result)
  if(res.code){
    apiStatus.value = true
  }
  carInfo.value = res.result
  insureKind.value = res.result.insureKind
  form.value = res.result
  const beginDate = dayjs(res.result.endDate).add(1, 'day').format('YYYY-MM-DD')
  form.value.beginDate = beginDate
  form.value.endDate = ''
  form.value.times = [beginDate]
}
// 日期范围变化
const timeRangeConfirmFn = (value = []) => {
  console.log(value)
  form.value.times = value
}
const changeSupplierId = (a, option = {}) => {
  form.value.insureCompany = a
  form.value.insureCompanyStr = option.supplierName
}
// 新增险种
const addNewInsure = () => {
  form.value.carInsureDetail.push({
    insureKindType: undefined,
    insuredSum: undefined,
    insureAmt: undefined
  })
}
// 商业险删除险种
const deleteEl = (elindex) => {
  form.value.carInsureDetail.splice(elindex, 1)
}

onLoad((options)=>{
  console.log('options', options)
  if(options.id){
    form.value.id = options.id
    getDetails(options.id)
  }
})
const toast = (text) => {
  uni.showToast({
    icon: 'none',
    title: text
  })
}
const ve_form = ref(null)
const formSubmit = () => {
  ve_form.value.validate((valid, errors) => {
    console.log(valid)
    if (valid) {
      const params = {
        ...form.value
      }
      renewInsureApi(params).then((res) => {
        if (res.code == 200) {
          toast(res.message)
          useLoadDataAndHotUpdateNavigateBack()
        } else {
          toast(res.message)
          return false
        }
      })
    } else {
      foldValidate(errors)
      console.log('验证失败', errors)
    }
  })
}
const getFileObj = (e) => {
  console.log('文件file: ', e)
}
  // 关联门店
  const changeSiteId = (a, option = {}) => {
    console.log(a)
    console.log(option)
    form.value.siteId = a
    form.value.siteName = option.siteName
  }
defineExpose({})

</script>

<template>
  <view class="container">
    <ve-popup :model-value="modelValue" @close="close" mode="bottom" :maskClose="true">
      <view class="add-popup">
        <view class="tlt c1 fs36">请选择文件类型</view>
        <!-- <ve-button class="button" size="default" @click="addfile(0)">文件</ve-button> -->
        <ve-button class="button" size="default" @click="addfile(1)">照片</ve-button>
      </view>
    </ve-popup>
    <FilterNavbar>
      <template #center>
        <view class="navbar-title"> 续保 </view>
      </template>
    </FilterNavbar>
    <view class="viewports">
      <view class="car-info-content" v-if="carInfo">
        <view>{{ carInfo.licenseNo || '-' }}</view>
        <view>{{ carInfo.modelName || '-' }}</view>
      </view>
      <ve-card style="margin-top: 24rpx;" v-if="carInfo">
        <ve-cell label="车架号">{{ carInfo.vin || '-' }}</ve-cell>
        <ve-cell label="车辆当前归属门店">{{ carInfo.carSiteName || '-' }}</ve-cell>
        <ve-cell label="归属车场">{{ carInfo.libraryName || '-' }}</ve-cell>
        <ve-cell label="保险状态">{{ carInfo.insureStatusStr || '-' }}</ve-cell>
      </ve-card>
      <ve-form v-if="apiStatus" ref="ve_form" :model="form" :rules="rules">
        <ve-card title="续保信息" type="none" fold v-model:initFold="foldStatus.fold1">
          <ve-form-item label="保险单关联门店"  required prop="siteId">
            <remote-select
              type="site"
              v-model="form.siteId"
              :label="form.siteName"
              :params="{ oldId: form.siteId }"
              @change="changeSiteId"
            />
          </ve-form-item>
          <ve-form-item label="保险公司" prop="insureCompanyStr" required>
            <remote-select type="supplierInsure" @change="changeSupplierId" :label="form.insureCompanyStr" v-model="form.insureCompany" />
          </ve-form-item>
          <ve-form-item label="保险单号">
            <ve-input v-model="form.insureNo" placeholder="请输入" />
          </ve-form-item>
          <ve-form-item label="有效期" prop="times" labelPosition="top" required>
            <ve-daterange-picker
              v-model:start="form.beginDate"
              v-model:end="form.endDate"
              :placeholder="['开始时间', '结束时间']"
              mode="date"
              @change="timeRangeConfirmFn"
            />
          </ve-form-item>
          <block v-if="insureKind == 0">
            <ve-form-item label="保额" unit="元">
              <ve-input-number :precision="2" placeholder="请输入" v-model="form.insuredSum"/>
            </ve-form-item>
            <ve-form-item label="保险费" unit="元">
              <ve-input-number :precision="2" placeholder="请输入" v-model="form.insureAmt"/>
            </ve-form-item>
          </block>
          <block v-if="insureKind == 1">
            <view class="form-fee-content" v-for="(el, elindex) in form.carInsureDetail" :key="elindex">
              <view class="form-fee-content-title">
                <span class="form-fee-content-title-text">新增险种{{ elindex + 1 }}</span>
                <view @click="deleteEl(elindex)">
                  <ve-icon name="delete_1" color="rgba(23,22, 22, 1)" :size="36" />
                </view>
              </view>
              <view class="form-fee-content-content">
                <ve-form-item label="承保险种">
                  <ve-picker-inline
                    v-model="el.insureKindType"
                    placeholder="请选择"
                    :range="sysDict.insure_business_kind_type"
                    unit="arrowRight"
                  >
                  </ve-picker-inline>
                </ve-form-item>
                <ve-form-item label="保额" unit="元">
                  <ve-input-number
                    :precision="2"
                    placeholder="请输入"
                    v-model="el.insuredSum"
                  />
                </ve-form-item>
                <ve-form-item label="保险费" unit="元">
                  <ve-input-number
                    :precision="2"
                    placeholder="请输入"
                    v-model="el.insureAmt"
                  />
                </ve-form-item>
              </view>
            </view>
            <view class="ve-form-item-btn ve-form-item-btn-have-data">
              <ve-icon name="plus" :size="30" />
              <span class="ve-form-item-btn-text" @click="addNewInsure(index)">新增险种</span>
            </view>
          </block>
          <ve-form-item label="业务员姓名">
            <ve-input v-model="form.experiencedPorsen" :allowClear="false" :maxlength="20" />
          </ve-form-item>
          <ve-form-item label="业务员电话">
            <ve-input-number placeholder="请输入" :maxlength="11" v-model="form.experiencedPhone"/>
          </ve-form-item>
          <ve-form-item label="保险单" :borderBottom="false">
            <uploadFile v-model:fileId="form.policyImgFileId" :fileTypes="fileTypes" @change="getFileObj" :fileIndex="1"></uploadFile>
          </ve-form-item>
        </ve-card>
      </ve-form>
    </view>
    <ve-bottom-box>
      <ve-button type="primary" @click="formSubmit" style="width: 100%;">确认</ve-button>
    </ve-bottom-box>
    </view>
</template>

<style lang="scss" scoped>
.container {
  background: #F7F8FA;
}
.viewports {
  display: flex;flex-direction: column;padding: 24rpx;
}
.car-info-content {
  height: 168rpx;
  background-image: url('../../../../static/images/carinfo-bc.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  flex-direction: column;
  align-items: self-start;
  justify-content: center;
  padding-left: 32rpx;
  color: #ffffff;
  font-family: PingFang SC-Regular, PingFang SC;

  view:nth-of-type(1) {
    font-size: 40rpx;
    font-weight: 600;
    margin-bottom: 4rpx;
  }
  view:nth-of-type(2) {
    margin-top: 4rpx;
    font-size: 28rpx;
    font-weight: 400;
  }
}
.add-popup{
  padding: 0 40rpx 64rpx;
  .tlt{
    margin: 48rpx 0;
    width: 100%;
    text-align: center;
  }
  .button{
    margin-bottom: 32rpx;
  }
}
.file-choose{

}
.form-fee-content {
  width: 654rpx;
  background: #f7f8fa;
  border-radius: 0rpx 0rpx 0rpx 0rpx;
  opacity: 1;
  margin-bottom: 32rpx;
  .form-fee-content-title {
    height: 88rpx;
    box-sizing: border-box;
    padding: 0 24rpx 0 24rpx;
    background: #f0f1f3;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .form-fee-content-title-text {
    font-size: 30rpx;
    font-family: PingFang SC-Semibold, PingFang SC;
    font-weight: 600;
    color: #191c27;
  }
  .form-fee-content-content {
    box-sizing: border-box;
    padding: 0 24rpx 0 24rpx;
  }
}
.ve-form-item-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 88rpx;
  background: #f3f7ff;
  border-radius: 4rpx 4rpx 4rpx 4rpx;
  opacity: 1;
  border: 2rpx solid #3072f6;
  .ve-form-item-btn-text {
    font-size: 30rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #3072f6;
    margin-left: 18rpx;
  }
}
.ve-form-item-btn-have-data {
  margin-top: 32rpx;
}
.delete-btn{
  margin-bottom: 24rpx;
  border: 2rpx solid #FE615A !important;
  background: #ffffff !important;
  .delete-text{
    color: #FE615A !important;
  }
}

.file-type{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    .file-name{
      max-width: 70%;
    }
  }
  .list-item {
    width: 204rpx;
    height: 204rpx;
    margin-right: 20rpx;
    overflow: hidden;
    // background: rgb(244, 245, 246);
    border-radius: 8rpx;
    border: 2rpx dashed #e2e2e2;
    overflow: hidden;
    position: relative;
    border-radius: 4rpx;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    align-items: center;
    justify-content: center;
    margin-bottom: 10rpx;
  }
  .delete-icon {
    position: absolute;
    top: 10rpx;
    right: 0rpx;
    z-index: 1;
    border-radius: 100rpx;
    width: 44rpx;
    height: 44rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .icon-clear-img {
    position: absolute;
    right: 10rpx;
    color: rgba(0, 0, 0, 0.8);
    width: 48rpx;
    height: 48rpx;
  }
  .preview-image {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 4rpx;
  }

  :deep(.ve-cell-title) {
  width: 240rpx;
  max-width: 240rpx;
}
</style>
